<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100%;
    }

    h3 {
        text-align: center;
        padding: 30px 0;
        font-size: 24px;
    }

    p {
        text-align: center;
        color: #999;
        padding: 10px 0;
    }

    .row {
        width: 400px;
        height: 50px;
        margin: 0 auto;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .row span {
        width: 60px;
        font-size: 20px;
    }

    .row input {
        width: 300px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-indent: 0.5em;
        /* 去掉输入框的轮廓线 */
        outline: none;
    }

    .row #submit {
        width: 300px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        margin: 0 auto;

        color: white;
        background-color: #fa8497;
        /* 去掉边框 */
        border: none;

        border-radius: 10px;
    }

    .row #submit:active {
        background-color: gray;
    }
</style>
<div class="container">
    <h3>小黄圆圆表白墙</h3>
    <p>输入后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input type="text">
    </div>
    <div class="row">
        <span>说: </span>
        <input type="text">
    </div>
    <div class="row">
        <button id="submit">提交</button>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 加入 ajax
    // - 点击提交的时候，ajax 要构造数据发送给服务器
    // - 页面加载的时候，从服务器获取消息列表，并在界面显示

    function getMessages(){
        $.ajax({
            type: 'get',
            url: 'message',
            success: function(body){
                // 当前 body 已经是一个 js 对象数组了，ajax 会根据响应的 content type 自动解析
                // 如果服务器返回的 content-type 已经是 application/json 了，ajax 就会把 body 自动转成 js 的对象
                // 如果客户端没有自动转，也可以通过 JSON.parse() 手动转换

                // 依次来取数组中的每个元素
                let container = document.querySelector('.container');
                for(let message of body){
                    let div = document.createElement('div');
                    div.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                    div.className = 'row';
                    container.appendChild(div);
                }
            }
        })
    }

    getMessages();

    // 当用户点击 submit, 就会获取到 input 中的内容, 从而把内容构造成一个 div, 插入到页面末尾.
    let submitBtn = document.querySelector('#submit');
    submitBtn.onclick = function() {
        // 1. 获取到 3 个 input 中的内容.
        let inputs = document.querySelectorAll('input');
        let from = inputs[0].value;
        let to = inputs[1].value;
        let msg = inputs[2].value;
        if (from == '' || to == '' || msg == '') {
            // 用户还没填写完, 暂时先不提交数据.
            return;
        }
        // 2. 生成一个新的 div, 内容就是 input 里的内容. 把这个新的 div 加到页面中.
        let div = document.createElement('div');
        div.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
        div.className = 'row';
        let container = document.querySelector('.container');
        container.appendChild(div);
        // 3. 清空之前输入框的内容.
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
        }

        // 4. 把当前获取到的输入框内容，构造成一个 HTTP POST 请求， 通过 ajax 发给服务器
        let body = {
            from: from,
            to: to,
            message: msg
        }
        $.ajax({
            type: 'post',
            url: 'message',
            contentType: 'application/json;charset=utf8',
            data: JSON.stringify(body),
            success: function(){
                alert("消息提交成功！");
            },
            error: function(){
                alert("消息提交失败！");
            }
        });
    }
</script>
</body>
</html>
